<template>
	<view class="pageRoot">
		<view class="report">役前检验</view>
		<view class="reportTime">查询时间：{{ createTime }}</view>
		<view class="reportModel">
			<view class="title">
				<view class="left">身份核验</view>
			</view>

			<div class="bottom">
				<div class="line">
					<p class="desc">基本信息：</p>
					<p class="info">{{ name }}</p>
				</div>
				<div class="line">
					<p class="desc">身份证号：</p>
					<p class="info">{{ cardNo }}</p>
				</div>
				<div class="line">
					<p class="desc">手机号：</p>
					<p class="info">{{ tel }}</p>
				</div>
			</div>

			<view class="tOInfo">
				<table>
					<tr>
						<td>实名认证：</td>
						<td colspan="2">
							姓名与身份证号
							<label>
								{{ jbxx.smrz.final_valid_result == '0' ? '一致' : '不一致' }}
							</label>
						</td>
					</tr>
					<tr>
						<td rowspan="5">手机号要素核验</td>
						<td>服务商：</td>
						<td>{{ jbxx.sjsys.attribute }}</td>
					</tr>
					<tr>
						<td>服务商代码：</td>
						<td>{{ jbxx.sjsys.attribute }}</td>
					</tr>
					<tr>
						<td>归属省份：</td>
						<td>{{ jbxx.sjsys.province }}</td>
					</tr>
					<tr>
						<td>归属城市：</td>
						<td>{{ jbxx.sjsys.city }}</td>
					</tr>
					<tr>
						<td colspan="2">
							<label>
								{{
					                jbxx.sjsys.checkResult == '0' ? '手机号与身份证号，姓名一致' : jbxx.sjsys.checkResult == '1' ? '手机号与身份证号或姓名不一致' : ''
					              }}
							</label>
						</td>
					</tr>
				</table>

				<view class="explain">
					<view class="explainTitle">说明</view>
					<view class="explainDesc">
						核验姓名，身份证，手机号是否一致（是否本人）。<br />
						查询手机号在网信息。<br />
					</view>
				</view>
			</view>
		</view>

		<template v-if="orderNo">
			<liu-drag-button @clickBtn="FP()" :bottomPx="85">发票</liu-drag-button>
			<liu-drag-button @clickBtn="FX()">分享</liu-drag-button>
		</template>
	</view>
</template>

<script>
	import {
		query
	} from '@/api/jinjian.js'
	
	import {
		edu
	} from '@/utils/temInfo'

	export default {
		data() {
			return {
				orderNo: null,

				name: null,
				cardNo: null,
				tel: null,

				createTime: null,

				jbxx: {
					smrz: {
						final_valid_result: ''
					},
					sjsys: {
						attribute: '',
						attribute_en: '',
						checkResult: '',
						city: '',
						province: ''
					}
				}
			}
		},
		onLoad(options) {
			this.$modal.loading('获取中....')

			if (options.orderNo) {
				this.orderNo = options.orderNo
				query({
					orderNo: this.orderNo,
					name: '8'
				}).then(res => {
					if (res.code == 200) {
						let data = res.data

						this.hanbleData(data)
						this.$modal.closeLoading()
					} else {
						let msg = data.msg
						if (data.code == 208) {
							msg += '，若您已支付！可在历史订单中查询'
						}
						this.$notify({
							title: '提示',
							message: msg,
							type: 'warning',
							duration: 0,
							onClose: () => {
								this.$router.push('/order')
							}
						})
						this.$modal.msgLoading(data.msg)
					}
				}).catch((e) => {
					this.$modal.msgLoading('查询未支付或您输入的三要素异常')
				})
			} else {
				this.$nextTick(() => {
					this.hanbleData(edu)
					this.$modal.closeLoading()
				})
			}
		},
		methods: {
			hanbleData(data) {
				console.log('------edu------', data)
				this.name = data.name
				this.cardNo = data.cardNo
				this.tel = data.tel
				this.createTime = data.createTime

				let ret = data.queryInfo
				try {
					let info = JSON.parse(ret)
					console.log(info)
					let smrzRes = info.smrz
					if (smrzRes.retcode == '000000') {
						this.jbxx.smrz.final_valid_result = smrzRes.retdata.final_valid_result
					} else {
						this.$modal.msgWarning('实名认证查询失败，原因：' + smrzRes.retmsg);
					}

					let sjsysRes = info.sjsys
					if (sjsysRes.retcode == '000000') {
						this.jbxx.sjsys = sjsysRes.retdata
					} else {
						this.$modal.msgWarning('手机三要素查询失败，原因：' + sjsysRes.retmsg);
					}
				} catch (err) {
					console.error('渲染异常：' + err)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pageRoot {
		background-image: url("@/static/images/infoBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-color: #eee;

		min-height: 1101px;
	}

	.report {
		padding-top: 50px;
		font-size: 20px;
		text-align: center;
		color: #fff;
	}

	.reportTime {
		margin-top: 10px;
		font-size: 12px;
		text-align: center;
		color: #fff;
	}

	.reportModel {
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;

		background: #feffff;
		border-radius: 10px;
		margin: 10px;

		.title {
			width: 100%;
			display: flex;

			.left {
				background-image: url();
				height: 45px;
				font-size: 17px;
				color: #00568b;
				background-size: cover;
				width: 123px;
				padding-left: 15px;
				box-sizing: border-box;
				font-weight: 600;
				line-height: 45px;
			}
		}

		.bottom {
			padding-top: 3px;

			.line {
				width: 100%;
				height: 36.0px;
				display: flex;
				align-items: center;
				font-size: 15.0px;
				justify-content: space-between;

				.desc {
					color: #94949C;
				}

				.info {
					max-width: 135.0px;
					color: #3D3D41;
					//white-space: normal;
					word-wrap: break-word;
					p-align: right;
				}
			}
		}

		.tOInfo {
			box-sizing: border-box;
			margin-top: 15px;
			width: 90%;
			display: flex;
			flex-direction: column;


			table {
				background-color: #f6f6f6;
				border-radius: 4px;
				border-collapse: collapse;
				font-size: 14px;
				padding: 2px;
				color: #078dff;

				table th,
				td {
					border-bottom: 2px solid black;
					border-color: #EBEEF5;
					text-align: center;
				}

				th {
					background-color: #1d98fe24;
				}

				td {
					padding: 8px 4px;
				}

				tr td:first-child {
					width: 35%;
				}

			}

			.explain {
				margin: 15px 0;
				border-radius: 5px;
				display: flex;
				flex-direction: column;

				.explainTitle {
					color: rgb(102, 102, 102);
					background: linear-gradient(90deg, rgb(216, 216, 216), rgb(238, 238, 238));
					padding: 5px 10px;
					box-sizing: border-box;
					font-size: 17px;
					font-weight: 600;
					border-radius: 5px 5px 0 0;
				}

				.explainDesc {
					background-color: rgb(246, 246, 246);
					color: rgb(102, 102, 102);
					padding: 15px 10px;
					box-sizing: border-box;
					font-size: 14px;
					border-radius: 0 0 5px 5px;
				}
			}
		}
	}
</style>